<template>
  <l-drawer
    :title="`${$t(isParent ? '查看父流程' : '查看子流程')}【${processTitle}】`"
    :visible.sync="midVisible"
    :showOk="false"
    :showClose="false"
    :width="1024"
    @closed="handleClosed"
    @opened="handleOpened"
    ref="formDialog"
  >
    <l-layout class="l-tab-page" :right="400">
      <l-panel :style="{ 'padding-right': userLogs.length > 0 ? 0 : '' }">
        <div class="l-auto-window" style="padding: 0 8px;">
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane v-if="hasWfForm" :label="$t('表单信息')" name="form">
              <div class="l-rblock" v-loading="formSchemeLoding">
                <template v-if="showForm">
                  <l-form-viewer
                    v-if="formType == '1'"
                    :formInfo="formInfo"
                    :isWfForm="true"
                    :authFieldsMap="formAuthFieldsMap"
                    ref="wfForm"
                  ></l-form-viewer>
                  <component
                    ref="wfForm"
                    v-else
                    :requiredMap="formRequiredMap"
                    :authFieldsMap="formAuthFieldsMap"
                    :isWfForm="true"
                    :is="sysFormComponent"
                  ></component>
                </template>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('流程信息')" name="wfinfo">
              <l-layout style="background: #f1f2f5;" :right="320">
                <l-panel class="flow-panel" style="padding:0;padding-top:0;">
                  <template #title>
                    <el-button-group>
                      <el-tooltip
                        effect="dark"
                        :content="$t('复原')"
                        placement="bottom"
                      >
                        <el-button
                          size="mini"
                          icon="el-icon-aim"
                          @click="resetZoom"
                        ></el-button>
                      </el-tooltip>
                      <el-tooltip
                        effect="dark"
                        :content="$t('放大')"
                        placement="bottom"
                      >
                        <el-button
                          size="mini"
                          icon="el-icon-zoom-in"
                          @click="handlerZoom(0.1)"
                        ></el-button>
                      </el-tooltip>
                      <el-tooltip
                        effect="dark"
                        :content="$t('缩小')"
                        placement="bottom"
                      >
                        <el-button
                          size="mini"
                          icon="el-icon-zoom-out"
                          @click="handlerZoom(-0.1)"
                        ></el-button>
                      </el-tooltip>
                    </el-button-group>

                    <div style="float:right;">
                      <el-tag
                        size="small"
                        effect="plain"
                        style="margin-right: 8px;"
                        >{{$t('正在审核')}}</el-tag
                      >
                      <el-tag
                        size="small"
                        effect="plain"
                        style="margin-right: 8px;"
                        type="success"
                        >{{$t('已审核')}}</el-tag
                      >
                      <el-tag
                        size="small"
                        effect="plain"
                        style="margin-right: 8px;"
                        type="danger"
                        >{{$t('已审核（驳回）')}}</el-tag
                      >
                    </div>
                  </template>
                  <b-wflow-viewer ref="bflow" @elementClick="elementClick">
                  </b-wflow-viewer>
                </l-panel>
                <template #right>
                  <l-panel
                    v-if="nodeLogs.length > 0"
                    class="flow-panel"
                    style="padding:0;padding-top:0;"
                  >
                    <template #title>
                      {{$t('记录信息')}}
                    </template>
                    <div
                      class="l-rblock"
                      style="padding:8px;overflow:hidden auto;"
                    >
                      <el-timeline>
                        <el-timeline-item
                          :type="item.type"
                          v-for="(item, index) in nodeLogs"
                          :key="index"
                          :timestamp="item.time"
                          placement="top"
                        >
                          <el-card shadow="hover">
                            <div class="title">{{ item.name }}</div>
                            <div class="content">
                              <template v-if="item.taskType != 3">
                                <l-user
                                  v-for="(userId, index2) in item.userIds"
                                  :key="index2"
                                  :value="userId"
                                ></l-user>
                                {{ item.des }}
                                <div v-if="item.desEx">{{ item.desEx }}</div>
                              </template>
                              <template v-else>
                                <el-button
                                  v-if="childId != item.childProcessId"
                                  size="mini"
                                  @click="OpenChildWf(item)"
                                  type="text"
                                  >{{ $t("查看") }}</el-button
                                >
                                <template v-if="item.isShowUser">
                                  <l-user
                                    v-for="(userId, index2) in item.userIds"
                                    :key="index2"
                                    :value="userId"
                                  ></l-user>
                                </template>
                                {{ item.des }}
                                <div v-if="item.desEx">{{ item.desEx }}</div>
                              </template>
                            </div>
                          </el-card>
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </l-panel>
                </template>
              </l-layout>
            </el-tab-pane>
            <el-tab-pane :label="$t('流转记录')" name="wflogs">
              <div class="l-rblock" style="padding:8px;overflow:hidden auto;">
                <el-timeline>
                  <el-timeline-item
                    :type="item.type"
                    v-for="(item, index) in logs"
                    :key="index"
                    :timestamp="item.time"
                    placement="top"
                  >
                    <el-card shadow="hover">
                      <div class="title">{{ item.name }}</div>
                      <div class="content">
                        <template v-if="item.taskType != 3">
                          <l-user
                            v-for="(userId, index2) in item.userIds"
                            :key="index2"
                            :value="userId"
                          ></l-user>
                          {{ item.des }}
                          <div v-if="item.desEx">{{ item.desEx }}</div>
                        </template>
                        <template v-else>
                          <el-button
                            v-if="childId != item.childProcessId"
                            size="mini"
                            @click="OpenChildWf(item)"
                            type="text"
                            >{{ $t("查看") }}</el-button
                          >
                          <template v-if="item.isShowUser">
                            <l-user
                              v-for="(userId, index2) in item.userIds"
                              :key="index2"
                              :value="userId"
                            ></l-user>
                          </template>
                          {{ item.des }}
                          <div v-if="item.desEx">{{ item.desEx }}</div>
                        </template>
                      </div>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </l-panel>
      <template #right>
        <l-panel
          v-if="userLogs.length > 0"
          style="padding-left:0;"
          :title="$t('审批信息')"
        >
          <div class="l-rblock" style="padding:8px;">
            <l-wordprint-btn
              v-if="currentNode.formWrodPrintCode"
              :code="currentNode.formWrodPrintCode"
              :getFormData="getPrintData"
            ></l-wordprint-btn>
            <l-wf-audit-info :data="userLogs"></l-wf-audit-info>
          </div>
        </l-panel>
      </template>
    </l-layout>

    <look-other-form
      ref="otherForm"
      type="lookmy"
      :params="{ processId: otherProcessId }"
      :isLoadFormData="true"
      :visible.sync="otherVisible"
      :isParent="false"
      :childId="processId"
    >
    </look-other-form>
  </l-drawer>
</template>

<script>
import mixin from "../../../mixins/wf";
export default {
  name: "look-other-form",
  mixins: [mixin()],
  props: {
    isParent: Boolean,
    childId: String,
  },
  data() {
    return {
      midVisible: false,

      otherProcessId: "",
      otherVisible: false,
    };
  },
  watch: {
    visible: {
      handler(n) {
        this.midVisible = n;
      },
    },
  },
  methods: {
    resetZoom() {
      this.$refs.bflow.reset();
    },
    handlerZoom(r) {
      this.$refs.bflow.handlerZoom(r);
    },
    elementClick(node) {
      if (node) {
        this.nodeLogs = this.nodeMap[node.id] || [];
      } else {
        this.nodeLogs = [];
      }
    },
    setForm() {
      if (this.type == "look" && this.task) {
        this.currentNode = this.wfData.find((t) => t.id == this.task.f_UnitId);
      } else {
        this.currentNode = this.wfData.find((t) => t.type == "startEvent");
      }
    },
    OpenChildWf(row) {
      this.otherProcessId = row.childProcessId;
      this.otherVisible = true;
    },
  },
};
</script>
